<template>
  <div class="fr w950">
    <div class="comm_bd mb10 clearfix center_box">
      <div class="vip-infobox clearfix">
        <div class="comm_bd mb10 center_info clearfix">
          <dl class="fl userinfobox">
            <dt class="face_img_dt">
                  <img src="https://ossweb-img.qq.com/images/gameshop/aba/images/thumb_sPackageGoodsPic18817/touxiang_20210203.jpg">
            </dt>
            <dd>
                    <p class="qq_intro">
                      <span title="">森哞暧光</span>
                    </p>
                    <!-- 未激活或者无资格 -->
                    <div class="info">未激活</div>
                  </dd>
          </dl>
          <dl class="fl progressbox clearfix">
            <dd>
              <p class="pro-label">当前会员等级</p>
              <p class="pro-level">暂无</p>
          </dd>
          <dd>
            <p class="pro-label">剩余体验额度</p>
            <p class="pro-num">0.00</p>
            </dd>
                <dd>
            <p class="pro-label">下月续费金额</p>
            <p class="pro-num">0.00</p>
            </dd>
            <dd>
              <p class="pro-btntip">暂无体验资格</p>
              <a id="activeBtn" title="申请解冻" class="fr comm_btn btn click_stream" href="javascript:;" style="display: none;">申请解冻</a>
              <a id="activate" title="立即激活" class="fr comm_btn btn click_stream" href="javascript:;" style="display: none;">立即激活</a>
            </dd>
      </dl>
        </div>
      </div>
    </div>
    <div class="comm_bd mb10 clearfix center_box">
         <div class="comm_bd mb10 clearfix center_box">
          <div class="center_tt">我的会员权益<span class="line"><s class="l_7"></s></span></div>
            <ul class="issue-tablist clearfix">
          <li class="current">
            <i class="ico-pay logo-cf"></i>
            <span>穿越火线</span>
        </li>
        </ul>
        <a href="#" class="viplink-more" title="会员体验特权活动">会员体验特权活动&gt;</a>
        <div class="tygift-list clearfix">
          <img src="https://js01.daoju.qq.com/common/images/mall/tylb.png" width="908" height="164" alt="礼包图">
          <div class="tygift-intro">体验会员续费礼包：闪光护目镜（30天）、烟雾保护头盔（30天）、新彩色聊天文字（7天）、新彩色昵称文字（7天）、防化服(30天）</div>
          <a title="领取" class="fr comm_btn btn click_stream">领取</a>
        </div>
        </div>
    </div>
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">我的缴费记录<span class="line"><s class="l_7"></s></span></div>
      <div>
        <div class="comm_bd issue-tbl" style="border-top-style: none;padding:0">
          <table width="100%">
            <thead>
                 <tr class="bg-tr">
                 <th width="150">业务名称</th>
                 <th width="150">续费时间</th>
                 <th width="165">续费金额（元）</th>
                <th width="200">到期时间</th>
            </tr>
          </thead>
          <tbody id="dj4">
           <tr>
            <td colspan="5">暂无记录</td>
           </tr>
        </tbody>
          </table>
          <div class="page" id="page_wrapper">
              <div id="list1_page"></div>
              <div id="list2_page" style="display:none;"></div>
              <div id="list3_page" style="display:none;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">道聚城体验会员介绍<span class="line"><s class="l_7"></s></span></div>
      <div class="vip-rule clearfix">
              <ul class="vip-ruleul">
                <li>用户激活后可享有体验会员的权益：先消费后付款活动购买特权以及续费专享礼包；</li>
                <li>
                  <span class="red">道聚城体验会员开通后免费赠送当月会员，次月首日会员过期，持续享有该会员特权需要重新续费（如您会员特权当月开通未使用，后续使用需重新完成手机验证）；</span>
                </li>
                <li>体验会员续费说明，会员权益当月免费使用，下月1号开放续费（暂不支持当月使用立即续费）；</li>
                <li>道聚城体验会员区分为7个等级，分别为：青铜、白银、黄金、铂金、钻石、星耀、黑金享有不同的特权；</li>
                <li>每月成功续费的玩家，可领取专享的游戏礼包（礼包仅限当月内领取）；</li>
                <li>体验会员额度和等级调整说明
                  <a href="javascript:TGDialogS('pop8');" class="detail-link">查看详情&gt;</a>
                </li>
              </ul>
            </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rwu5'
}
</script>

<style lang="scss" scoped>
.fr {
    float: right;
    .center_box {
    position: relative;
    }
    .mb10 {
    margin-bottom: 10px;
    .center_box .page {
    padding-top: 20px;
  }
  .vip-rule {
    margin-left: 20px;
    color: #3a3f4a;
    .red, a.red {
    color: #f74a4a;
}
   .vip-ruleul li {
    line-height: 26px;
    list-style-type: disc;
}
}
.page {
    text-align: center;
    padding-top: 10px;
    height: 38px;
}
    .issue-tbl {
    margin-top: 20px;
   tbody tr {
    width: 90%;
    border-bottom: 1px dashed #e6e9ef;
   td {
    height: 40px;
    text-align: center;
}
}
    th {
    font-weight: 400;
    font-size: 14px;
}
   .bg-tr {
    height: 36px;
    line-height: 36px;
    background: #f3f4f6;
    border-top: 1px solid #e6e9ef;
    border-bottom: 1px solid #e6e9ef;
}
}
    .tygift-list {
    margin: 10px auto 0;
    width: 908px;
    height: 164px;
    border: 1px solid #eee;
    position: relative;
    a.comm_btn {
    position: absolute;
    top: 64px;
    right: 35px;
    z-index: 2;
    width: 95px;
    height: 47px;
    background: #f4d78b;
    background: -moz-linear-gradient( top,#f4d78b,#f3d79c);
    background: -webkit-linear-gradient( top,#f4d78b,#f3d79c);
    border-bottom: none;
    font-size: 18px;
    color: #222;
    line-height: 46px;
    text-align: center;
}
    .tygift-intro {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -215px;
    padding: 10px 6px;
    width: 372px;
    height: 58px;
    background: url(https://js02.daoju.qq.com/common/images/channel/revision/cf/vipico.png) no-repeat;
    background-position: 0 -72px;
    z-index: 10;
    color: #fff;
    line-height: 18px;
    text-align: center;
    display: none;
 }
 }
 .tygift-list:hover .tygift-intro{
      display: block;
    }
    .viplink-more {
    position: absolute;
    top: 72px;
    right: 24px;
    color: #1994eb;
}
    .issue-tablist {
    margin-top: 20px;
    width: 906px;
    height: 40px;
    position: relative;
    border-bottom: 1px solid #e6e9ef;
    .current {
    border-bottom: 2px solid #f74a4a;
    height: 41px;
  }
  li {
    float: left;
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #3a3f4a;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    .ico-pay {
    background: url(//js02.daoju.qq.com/common/images/icon.png) no-repeat;
}
   .logo-cf {
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-position: -114px 0;
}
}
  }
    .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
  .line {
    display: block;
    background: #e6e9ef;
    height: 1px;
    overflow: hidden;
    margin-top: 5px;
    s.l_7 {
    width: 100px;
    }
   s {
        display: block;
        background: #f74a4a;
        height: 1px;
        overflow: hidden;
    }
    }
    }
    .fl {
      float: left;
    }
   .vip-infobox .center_info {
    padding: 15px 10px 0;
    height: auto;
    border: none;
    position: relative;
     .progressbox {
    width: 605px;
    overflow: hidden;
        dd {
        width: 150px;
        height: 100px;
        text-align: center;
        float: left;
        margin-left: 0;
        border-right: 1px solid #eee;
    .pro-btntip {
    margin-top: 34px;
    color: #999;
    font-size: 14px;
}
    }
    .pro-label {
    padding: 18px 0 15px;
    font-size: 14px;
    color: #999;
   }
    .pro-num {
    font-size: 20px;
    color: #333;
}
    .pro-label {
    padding: 18px 0 15px;
    font-size: 14px;
    color: #999;
}
  .pro-level {
    font-size: 18px;
    color: #eb4c4c;
    font-weight: bold;
 }
 }
    dd {
    margin-left: 110px;
    padding-top: 4px;
    line-height: 24px;
    .qq_intro {
    width: 168px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .info {
    height: 27px;
    line-height: 27px;
    margin-top: 9px;
 }
    }
    .userinfobox {
    margin-top: 10px;
    }
   .face_img_dt {
    position: relative;
    width: 100px;
    height: 100px;
   img {
      width: 100px;
      height: 100px;
      display: block;
      border-radius: 50px;
      background: #ccc;
      cursor: pointer;
  }
  }
   dt {
    float: left;
    }
    }
    }
    .center_box {
        padding: 15px 20px 20px 20px;
    }
    .comm_bd {
        border: 1px solid #e6e9ef;
        background: #fff;
    }
    }
.w950 {
    width: 950px;
}
</style>
